<template>
  <el-container direction="horizontal">
    <nav-menu :menus="menus"/>
    <el-container>
      <el-header class="header">
        <header-bar :user="user"/>
      </el-header>
      <el-main class="main">
        <div class="wrapper">
          <router-view/>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Vue from "vue";
import { mapActions } from "vuex";
import ElTreeGrid from "element-tree-grid/dist/tree-table.js";
import { USERNAME } from "@/config/store/mutation-types";
import "@/components";
import NavMenu from "./nav-menu";
import HeaderBar from "./header-bar";
import menus from "./menus.json";

Vue.component(ElTreeGrid.name, ElTreeGrid);

export default {
  name: "root",
  data() {
    return {
      user: {},
      menus: [],
      loading: false,
    };
  },
  components: {
    NavMenu,
    "nav-menu": NavMenu,
    "header-bar": HeaderBar
  },
  mounted() {
    const loader = this.$loading({
      lock: true,
      text: "正在加载菜单"
    });
    Promise.all([this.getUser(), this.getMenu(), this.sleep()]).then(
      ([user, menus]) => {
        loader.close();
        this.user = user;
        this.menus = menus;
        this[USERNAME](user.username);
      }
    );
  },
  methods: {
    ...mapActions([USERNAME]),
    getMenu() {
      return new Promise(resolve => {
        resolve(menus);
      });
    },
    getUser() {
      return new Promise(resolve => {
        resolve({
          username: "系统管理员"
        });
      });
    },
    /**
     * 至少都要展示 1s 的加载中效果
     */
    sleep(sec = 1) {
      return new Promise(resolve => {
        setTimeout(() => resolve(), sec * 1000);
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../assets/vars.less";

.header {
  color: #fff;
  background-color: @baseBgColor;
  padding: 0 20px 0 0;
}

.main {
  background-color: ghostwhite;
  display: flex;
  padding-right: 0;
  .wrapper {
    width:100%;
    display: flex;
    box-sizing: border-box;
    padding: 20px;
    flex: auto;
    background-color: white;
    flex-direction: column;
  }
}
</style>
